<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #box {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 10px;
        top: 200px;
        border-radius: 50%;
        background: #0ee9a7;
    }
    #line div{
        position: absolute;
        left: 10px;
        top: 200px;
        border-radius: 50%;
        background: #0ee9a7;
        opacity: 0.2;
        mix-blend-mode:overlay;
    }

    #box2 {
        position: absolute;
        width: 50px;
        height: 50px;
        left: 945px;
        top:380px;
        border-radius: 50%;
        background: #db1050
    }
</style>
<script>
    onload = function () {
        var box = document.getElementById("box");
        var box2 = document.getElementById("box2");
        var line = document.getElementById("line");
        var x, b;
        var centerpoint = {
            x: box.offsetLeft,
            y: box.offsetTop
        }
        // var para = -2 * x * x + b;

        var target = {
            x: box2.offsetLeft - centerpoint.x,
            y: centerpoint.y - box2.offsetTop
        }
        var a = -0.0015;
        b =  (target.y - a * target.x * target.x) / target.x;
        var _x = 0;

        var t = setInterval(function () {
            _x += 8;
            var _y = a * _x * _x + b * _x;
            box.style.left = _x + centerpoint.x + "px";
            box.style.top = centerpoint.y - _y+"px"
            if (_x> target.x) {
                box.style.left =  box2.offsetLeft+ "px";
                box.style.top =  box2.offsetTop+"px"
                clearInterval(t);
            }
        }, 30)
    }
</script>

<body>
    <div id="box"></div>
    <div id="box2"></div>
    <div id="line"></div>
</body>

</html>